<!-- 底部tabbar组件 -->
<template>
  <view class="tabbar" :style="{ background: obj.backgroundColor }">
    <view class="inner">
      <view @click="linkTo(v, i)" class="single" :class="{ 'isCreate': v.text == '' }" :style="{
        color:
          obj.activeIndex == i ? obj.selectedColor : obj.color,
      }" v-for="(v, i) in obj.list" :key="i">
        <image class="icon" model="aspectFill" :src="obj.activeIndex == i ? v.selectedIconPath : v.iconPath"></image>
        <view class="txt">{{ v.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "tabbar",
  components: {},
  props: {
    obj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  computed: {
    activeIndex() {
      let pages = getCurrentPages();
      let currentPage = `/${pages[pages.length - 1].route}`;
      return this.obj.list.findIndex((v) => v.pagePath == currentPage);
    },
  },
  watch: {},
  onLoad(d) { },
  mounted() {
    this.$store.dispatch("changeTab", {
      i: this.activeIndex,
      target: this.obj.target,
    });
  },
  methods: {
    linkTo(v, i) {
      if (this.obj.activeIndex == i && v.text) {
        return;
      }

      if (!v.open) {
        this.$util.tip({ title: "暂未开放" });
        return;
      }
      v.text && this.$store.dispatch("changeTab", { i, target: this.obj.target });
      this.$util.linkTo(v.pagePath, v.text ? "noback" : "common");
    },
  },
};
</script>
<style lang='less' scoped>
.tabbar {
  z-index: 11;
  position: fixed;
  bottom: 0;
  left: var(--window-left);
  right: var(--window-right);
  height: 50px;

  .inner {
    .border-1px(top, #e7e7e7);
    .flex(row, center);
    padding-top: 5upx;
    width: 100%;
    height: 100%;

    .single {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .txt {
      font-size: 25upx;
    }
  }
}

.icon {
  display: flex;
  justify-content: center;
  margin-bottom: 5upx;
  width: 42upx;
  height: 43upx;
}

.isCreate .icon {
  margin-bottom: 0;
  width: 85upx;
  height: 85upx;
}
</style>